export const addUploadFile = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addUploadFile', {
        model: {
            defaults: {
                name: 'addUploadFile',
                droppable: false,
                components: [{
                    content: ' <div class="file-upload-wrapper">\
                <button type="button" class="file-upload-button">上传附件</button>\
                <input type="file" id="fileToUpload" name="fileToUpload" accept="*" class="file-upload-input" />\
            </div>\
            <p id="file-name" class="file-name-class">\
                未选择文件</p>\
                <input type="submit" style="background:rgb(26, 163, 205);color:white" class="submit" value="提交" name="submit">',
                }],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    thx.getElementById('fileToUpload').onchange = () =>{
                        document.getElementById('file-name').textContent = thx.getElementById('fileToUpload').files[0].name;
                    }
                    
                    thx.getElementsByClassName('submit')[0].onclick = () => {
                        const fileInput = thx.getElementById('fileToUpload');
                        const file = fileInput.files[0];
                        alert(file.name)
                        if (file) {
                            // 这里你可以添加 AJAX 请求来上传文件  
                            // 例如使用 FormData 和 fetch API  
                            const formData = new FormData();
                            formData.append('file', file);  
                            //上传地址
                            fetch('#', {
                                method: 'POST',
                                body: formData,
                            })
                                .then(response => response.json())
                                .then(data => {
                                    console.log('Success:', data);
                                    // 可以在这里处理上传后的响应，如更新编辑器中的组件  
                                })
                                .catch((error) => {
                                    console.error('Error:', error);
                                });
                        }
                    }
                },
                        styles: `
                    .file-name-class {
                        font-size: 14px;
                        margin-left: 6px;
                    }

                    .file-upload-wrapper {
                        position: relative;
                        overflow: hidden;
                        display: inline-block;
                    }

                    .file-upload-input {
                        font-size: 100px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        opacity: 0;
                    }

                    .file-upload-button {
                        display: inline-block;
                        cursor: pointer;
                        border: none;
                        background: none;
                        color: rgb(26, 163, 205);
                    }
                `,
            },

            },
        });

    // 注册 customCheckbox 组件
    editor.BlockManager.add('uploadFile', {
        label: '上传附件',
        category: '其他类',
        media: `<svg t="1721367024432" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8765" width="30" height="30"><path d="M498.803955 473.653078a73.187419 73.187419 0 1 0-103.510558-103.494226L162.500797 602.869793c-71.30437 72.022967-71.20638 187.472026 0 258.678405s186.655439 71.40236 258.678406 0L860.862265 421.848804A182.91547 182.91547 0 0 0 602.18386 163.18673l-12.86941 12.967401a54.907305 54.907305 0 0 1-77.641085-77.641085l12.86941-12.9674c114.730463-114.109856 299.850718-114.011866 413.862584 0s114.224179 299.017799 0 413.846252L498.689633 939.07496c-114.322169 113.505582-299.132121 113.195279-413.045997-0.718596S-28.580542 639.648868 84.92504 525.34303l232.841595-232.825263c71.859649-71.40236 187.472026-71.20638 258.678405 0s71.40236 186.818756 0 258.678405L356.472855 771.021372a54.907305 54.907305 0 0 1-77.641085-77.641085z" p-id="8766"></path></svg>`,
        content: {
            type: 'addUploadFile'
        },
    });
};